<template>
  <div class="invitation-container">
    <div class="invitation-content">
      <p class="invitation-text">AILoveManus向你发送了一封体验邀请函</p>
      <p class="invitation-text">AILoveManus希望你可以和ta一起享受这次AI之旅</p>

      <div ref="smileyArea" class="smiley-area">
        <!-- Smiley head (background color controlled by emotion) -->
        <div class="smiley" :style="smileyStyle"></div>

        <!-- Facial Features -->
        <div class="eyes">
            <div class="eye left-eye" ref="leftEyeRef">
                <div class="pupil" :style="leftPupilStyle"></div>
            </div>
            <div class="eye right-eye" ref="rightEyeRef">
                 <div class="pupil" :style="rightPupilStyle"></div>
            </div>
        </div>

        <!-- Mouth (shape changes based on emotion) -->
        <div :class="['mouth', currentEmotion + '-mouth']"></div>

      </div>

      <div class="action-buttons">
        <el-button type="success" size="large" @mouseover="handleAcceptHover" @mouseleave="handleMouseLeave" @click="handleAccept">接受</el-button>
        <el-button type="danger" size="large" @mouseover="handleRejectHover" @mouseleave="handleMouseLeave" @click="handleReject">拒绝</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import {ElMessage} from "element-plus";

const router = useRouter();

// Reactive state for smiley emotion and color
const currentEmotion = ref('default'); // 'default', 'happy', 'sad'
const smileyColor = computed(() => {
  switch (currentEmotion.value) {
    case 'happy':
      return '#ffe08b'; // Happy yellow (based on image)
    case 'sad':
      return '#f0a8a8'; // Sad greenish (based on image)
    default:
      return '#ffe08b'; // Default to happy yellow
  }
});

const smileyStyle = computed(() => ({
    backgroundColor: smileyColor.value
}));

// Eye tracking logic
const mouseX = ref(0);
const mouseY = ref(0);
const smileyArea = ref(null); // Reference to the smiley area div
const leftEyeRef = ref(null); // Reference to the left eye div
const rightEyeRef = ref(null); // Reference to the right eye div

const leftPupilStyle = ref({});
const rightPupilStyle = ref({});

const handleMouseMove = (event) => {
    mouseX.value = event.clientX;
    mouseY.value = event.clientY;
    updatePupilPosition();
};

const updatePupilPosition = () => {
    // Ensure refs are available
    if (!leftEyeRef.value || !rightEyeRef.value) return;

    const leftEyeRect = leftEyeRef.value.getBoundingClientRect();
    const rightEyeRect = rightEyeRef.value.getBoundingClientRect();

    const leftEyeCenterX = leftEyeRect.left + leftEyeRect.width / 2;
    const leftEyeCenterY = leftEyeRect.top + leftEyeRect.height / 2;

    const rightEyeCenterX = rightEyeRect.left + rightEyeRect.width / 2;
    const rightEyeCenterY = rightEyeRect.top + rightEyeRect.height / 2;

    // Max distance pupil can move from eye center (adjust based on eye size)
    const eyeRadius = leftEyeRect.width / 2;
    const maxPupilDistance = eyeRadius * 0.4; // Move pupil up to 40% of eye radius

    // Calculate translation for left pupil
    const angleLeft = Math.atan2(mouseY.value - leftEyeCenterY, mouseX.value - leftEyeCenterX);
    const moveXLeft = Math.cos(angleLeft) * maxPupilDistance;
    const moveYLeft = Math.sin(angleLeft) * maxPupilDistance;

    // Calculate translation for right pupil
    const angleRight = Math.atan2(mouseY.value - rightEyeCenterY, mouseX.value - rightEyeCenterX);
    const moveXRight = Math.cos(angleRight) * maxPupilDistance;
    const moveYRight = Math.sin(angleRight) * maxPupilDistance;

    // Apply translation to pupil styles
    leftPupilStyle.value = {
        transform: `translate(-50%, -50%) translate(${moveXLeft}px, ${moveYLeft}px)`,
    };
    rightPupilStyle.value = {
        transform: `translate(-50%, -50%) translate(${moveXRight}px, ${moveYRight}px)`,
    };
};

// Function to update emotion on button hover
const handleAcceptHover = () => {
    currentEmotion.value = 'happy';
};

const handleRejectHover = () => {
    currentEmotion.value = 'sad';
};

const handleMouseLeave = () => {
    currentEmotion.value = 'default';
};

// Button click handlers (example)
const handleAccept = () => {
  ElMessage.success("欢迎光临，客官里边请！")
  router.push('/home')
};

const handleReject = () => {
  ElMessage.primary("来吧，有意见就提出来吧！")
};

// Attach and detach mousemove listener, and initial pupil update
onMounted(() => {
    window.addEventListener('mousemove', handleMouseMove);
    // Initial update to position eyes when component mounts
    // A small delay is crucial here to ensure the DOM elements are rendered and measured
    setTimeout(updatePupilPosition, 100); // Increased delay
});

onUnmounted(() => {
    window.removeEventListener('mousemove', handleMouseMove);
});

</script>

<style scoped>
/* Match Home.vue background */
.invitation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1a1a2e; /* Deep dark blue */
  color: #ffffff; /* White text */
  padding: 20px;
}

.invitation-content {
  text-align: center;
  max-width: 600px; /* Limit content width */
  width: 100%;
}

.invitation-text {
  font-size: 1.4em;
  margin-bottom: 20px;
}

.smiley-area {
    width: 200px;
    height: 200px;
    margin: 40px auto;
    position: relative;
    border-radius: 50%;
    /* overflow: hidden; */ /* Remove overflow hidden to allow mouth to extend */
    background-color: #ffe08b; /* Default smiley color (happy yellow) */
    transition: background-color 0.3s ease;
}

.smiley {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Ensure inner smiley is also round */
    /* Background color is controlled by smileyStyle computed property */
}

.eyes {
    position: absolute;
    top: 40%; /* Adjust vertical position of eyes */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1; /* Ensure eyes are above the mouth */
}

.eye {
    width: 40px;
    height: 40px;
    background-color: #ffffff; /* White eye color */
    border-radius: 50%;
    position: relative; /* Needed for pupil absolute positioning */
}

.left-eye {
    /* Position relative to .eyes container */
    left: 0;
}

.right-eye {
    /* Position relative to .eyes container */
    right: 0;
}

.pupil {
    width: 20px;
    height: 20px;
    background-color: #303133; /* Dark pupil color */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    /* Initial centering transform */
    transform: translate(-50%, -50%);
    /* Additional translation for eye movement applied via inline style */
}

.mouth {
    position: absolute;
    bottom: 40px; /* Adjust vertical position of mouth */
    left: 50%;
    transform: translateX(-50%);
    width: 60%; /* Mouth width */
    height: 50px; /* Base mouth height */
    background-color: #a00; /* Default mouth color (red) */
    border-radius: 0 0 50px 50px / 0 0 25px 25px; /* Rounded bottom for default/happy */
    transition: height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
    z-index: 0; /* Ensure mouth is below eyes */
}

/* Happy mouth */
.happy-mouth {
    height: 80px; /* Larger height for smile */
    background-color: #a00;
    border-radius: 0 0 100px 100px / 0 0 50px 50px; /* Wider, happier curve */
}

/* Sad mouth */
.sad-mouth {
    height: 20px; /* Smaller height for frown */
    background-color: #303133; /* Darker color for sadness */
    border-radius: 50px 50px 0 0 / 25px 25px 0 0; /* Rounded top for frown */
}

.action-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Style overrides for Element Plus buttons to match theme if needed */
</style> 